<template>
	<view class="container" v-show="showMask">
		<view class="mask" :style="{'opacity': maskVal}" @click="hide"></view>

		<view class="main"
			:style="{transform: `translateY(${transY}rpx)`,'transition-timing-function': speed,'height': height+'rpx'}"
			@transitionend="onTransitionend">
			<slot>
				<view class="navtop">
					<view class="wenzi">
						<text>{{count}}条评论</text>
					</view>
					<span class="iconfont icon-guanbi1" @click="hide"></span>
				</view>
				<scroll-view scroll-y="true" class="gundong" style="height: 760rpx;">
					<view class="contentBox" v-for="(item,index) in pinglunlist" :key="index">
						<view class="touxiang">
							<view class="imgbox">
								<image :src="item.avatar" mode=""></image>
							</view>
							<view class="imgwenzi">
								<text class="one">{{item.nickname}}</text>
								<text class="two">{{item.guanxi}}</text>
							</view>
							<view class="shanchu" v-if="item.if_self==1" @tap="deletepinglun(item.id)">
								<text>删除</text>
							</view>
						</view>
						<view class="cententtwo">
							<text>{{item.content}}</text>
						</view>
						<view class="datetime">
							<text>{{timestampFormat(item.time)}}</text>
						</view>
					</view>										
					<view class="isOver" v-if="pinglunlist.length>0">---我是有底线的，没有更多评论了~---</view>
					<view class="isOver" v-if="pinglunlist.length<1">目前还没有人评论，你来说两句把~</view>
				</scroll-view>

				<view class="btnpinglun">
					<input maxlength="140" class="inputs" type="text" placeholder="我来说几句..."
						placeholder-style="font-size:26rpx;color:#ACACAC;"v-model="pinglun" />
					<image src="../../static/fabuanniu.png" mode="" @tap="comment"></image>
				</view>
			</slot>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from 'vuex';
	export default {
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				isLogin: state => state.user.isLogin
			})
		},
		/**
		 *  @ speed [String] {运动曲线}
		 *  @ height [Number] {弹框高度 单位：rpx}
		 *  @ maskVal [Number] {蒙层透明度}
		 */
		props: {
			speed: {
				type: String,
				default: 'cubic-bezier(0.68, -0.55, 0.27, 1.55)'
			},
			height: {
				type: Number,
				default: 500
			},
			maskVal: {
				type: Number,
				default: 0.4
			},
			did:{
				type: Number
			},
			pinglunlist:{
				type: Array
			},
			count:{
				type: Number
			}
		},
		data() {
			return {
				showMask: false,
				transY: this.height,
				// pinglunlist: [1,2,3],
				pinglun:''
			}
		},
		methods: {
			
			show() {
				this.showMask = true
				setTimeout(() => {
					this.transY = 0
				}, 17)

			},
			hide() {
				this.transY = 500
			},
			onTransitionend() {
				if (!this.transY) return;
				this.showMask = false
			},			
			comment(){				
				if(!this.pinglun){
					uni.showToast({
						title: '请输入评论内容...',
						icon: "none",
						
					})
					
				} else{
					this.$store
						.dispatch('fasongpinglun', {						
							openid: this.userInfo.openid,
							id: this.did,
							student_id:uni.getStorageSync("student_id") ? uni.getStorageSync("student_id") : 0,
							index:uni.getStorageSync("def"),
							content: this.pinglun
						})
						.then(res => {	
							this.pinglun = ''
								if(res.data.code==1){									
									this.$parent.showpinglunlist()
									this.$parent.diaoyong()
									uni.showToast({
										title: res.data.msg,
										icon: "none",								
									})
								}					
							
					
						});	
					
					
				}
															
			},
			deletepinglun(id){
				uni.showModal({
					title: '',
					content: '你确定要删除本条评论吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							console.log('用户点击确定');
							this.$store
								.dispatch('deletepinglun', {
									id: id
								})
								.then(res => {
									console.log(res)
									this.$parent.showpinglunlist()
									this.$parent.diaoyong()
								});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			timestampFormat(timestamp) {
				if (!timestamp) return '';
			
				function zeroize(num) {
					return (String(num).length == 1 ? '0' : '') + num;
				}
			
				var curTimestamp = parseInt(new Date().getTime() / 1000); //当前时间戳
				var timestampDiff = curTimestamp - timestamp; // 参数时间戳与当前时间戳相差秒数
			
				var curDate = new Date(curTimestamp * 1000); // 当前时间日期对象
				var tmDate = new Date(timestamp * 1000); // 参数时间戳转换成的日期对象
			
				var Y = tmDate.getFullYear(),
					m = tmDate.getMonth() + 1,
					d = tmDate.getDate();
				var H = tmDate.getHours(),
					i = tmDate.getMinutes(),
					s = tmDate.getSeconds();
			
				if (timestampDiff < 60) { // 一分钟以内
					return "刚刚";
				} else if (timestampDiff < 3600) { // 一小时前之内
					return Math.floor(timestampDiff / 60) + "分钟前";
				} else if (curDate.getFullYear() == Y && curDate.getMonth() + 1 == m && curDate.getDate() == d) {
					return '今天' + zeroize(H) + ':' + zeroize(i);
				} else {
					var newDate = new Date((curTimestamp - 86400) * 1000); // 参数中的时间戳加一天转换成的日期对象
					if (newDate.getFullYear() == Y && newDate.getMonth() + 1 == m && newDate.getDate() == d) {
						return '昨天' + zeroize(H) + ':' + zeroize(i);
					} else if (curDate.getFullYear() == Y) {
						return zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i);
					} else {
						return Y + '年' + zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i);
					}
				}
			},
		},
		created() {
			

		}
	}
</script>

<style scoped lang="scss">
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background-color: rgb(0, 0, 0);
		z-index: 999;
	}

	.main {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		background-color: #f4f4f4;
		border-radius: 20rpx 20rpx 0 0;
		transition: transform 0.3s;
		z-index: 9999;
	}


	.gundong {
		margin-bottom: 100rpx;
	}

	.navtop {
		width: 100%;
		height: 100rpx;
		border-bottom: 4rpx solid #e5e5e5;
		display: flex;
		align-items: center;
		position: relative;
		background-color: #fff;

		.wenzi {
			width: 100%;
			height: 100%;
			text-align: center;
			font-size: 30rpx;
			color: #000;
			line-height: 100rpx;
		}

		.iconfont {
			position: absolute;
			right: 20rpx;
			height: 50rpx;
			z-index: 99999 !important;
			font-weight: 700;
			color: #c8c6c6;
			font-size: 50rpx;
			line-height: 50rpx;
			text-align: center;
		}
	}

	.contentBox {
		width: 100%;
		// min-height:300rpx ;
		// margin-bottom: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #fff;

		.touxiang {
			position: relative;
			height: 120rpx;
			width: 100%;
			// background-color: #0086B3;
			display: flex;
			align-items: center;
			// padding: 0 20rpx;

			.imgbox {
				width: 100rpx;
				height: 100rpx;
				

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.imgwenzi {
				margin-left: 15rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;

				.one {
					font-size: 32rpx;
					color: #000;
					font-weight: 500;

				}

				.two {
					font-size: 24rpx;
					color: #b2b2b2;
				}
			}
			.shanchu{
				position: absolute;
				right: 20rpx;
				font-size: 24rpx;
				color: #818a8b;
			}
		}

		.cententtwo {
			// padding:0 20rpx;
			font-size: 28rpx;
			color: #4e4e4e;
		}

		.datetime {
			width: 100%;
			height: 50rpx;
			text-align: right;
			font-size: 24rpx;
			color: #ccc;
			// padding:0 20rpx;
		}


	}

	.btnpinglun {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 140rpx;
		width: 100%;
		background-color: #fff;
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;

		.inputs {
			width: 100%;
			height: 60%;
			background-color: #e4e2e2;
			border-radius: 45rpx;
			padding: 0 75rpx 0 30rpx;
			font-size: 28rpx;
			color: #272822;
		}

		image {
			position: absolute;
			right: 45rpx;
			width: 50rpx;
			height: 50rpx;
		}
	}

	.isOver {
		width: 100%;
		text-align: center;
		margin: 30rpx 0;
		color: #b6b6b6;
		font-size: 28rpx;
	}
</style>
